// stylelint-disable-next-line
@import '@scss/pages/partials/_order-navigation';

#order-view-page {
  .order-actions {
    display: flex;
    flex-wrap: wrap;

    > * {
      margin-bottom: var(--#{$cdk}size-16);

      &:not(:last-child) {
        margin-right: var(--#{$cdk}size-10);
      }
    }

    .btn-action {
      &[disabled] {
        background-color: var(--#{$cdk}primary-300);
        border-color: var(--#{$cdk}primary-400);
      }
    }
  }

  #historyTabContent {
    .badge {
      font-size: var(--#{$cdk}size-12);
      font-weight: 700;
    }

    .card-details-actions {
      display: flex;
      align-items: center;

      .btn.update-status{
        white-space: nowrap;
      }
    }
  }

  .discount-action {
    margin-bottom: 1rem;
  }

  .add-product {
    &-inputs {
      min-width: 120px;
      margin-top: 24px;
    }

    &-quantity,
    &-buttons {
      .form-group {
        margin-top: 24px;
        margin-bottom: 0;
      }
    }
  }

  #view_order_payments_block {
    .table {
      &-head {
        &-invoice {
          min-width: 200px;
        }
      }
    }

    #order_payment_id_currency {
      flex: inherit;
      min-width: 75px;
      height: auto;
    }
  }

  .customer,
  #orderProductsPanel,
  .product-row .tab-content {
    margin-bottom: 1.875rem;
  }

  .product-row {
    .nav-tabs {
      position: relative;
      z-index: 5;
      display: flex;
      flex-wrap: nowrap;
      padding-left: 0;
      margin-bottom: -1px;
      overflow: auto;
      overflow-y: hidden;

      .nav-item {
        flex-shrink: 0;
      }
    }

    .tab-content {
      border: 1px solid var(--#{$cdk}primary-400);
    }
  }

  // Todo: Looks like we don't have any custom select without JS to add in a form
  // Please notice that you have two different select2 component inside order view
  .select2-container {
    min-width: var(--#{$cdk}size-208);
    max-width: 100%;
    height: 100%;

    > .selection {
      display: block;
      height: 39px;

      .select2-selection--single {
        padding-block: 0;
        line-height: 39px;
      }

      .select2-selection--single,
      .select2-selection__rendered {
        display: block;
        line-height: 39px;
        // stylelint-disable-next-line
        height: 39px !important;
      }
    }
  }

  .select-status-colored,
  .select2-selection {
    display: flex;
    align-items: center;
    padding: 0.375rem 2.2rem 0.375rem 0.4375rem;
  }

  .select-status {
    position: relative;
    // max-width: 280px;
    max-width: 100%;
    background: $white;
    border: none;
    @include transition(0.2s ease-out);

    .select2-container {
      background-color: transparent;
    }

    .select2-selection__rendered,
    .select2-selection__arrow b {
      color: var(--#{$cdk}white);
      border-top-color: var(--#{$cdk}white);
    }

    .select-status-colored,
    .select2-selection {
      color: $white;
      background: none;
      border: none;

      option {
        color: initial;
        background: inherit;
      }
    }

    &.is-bright .select2-selection__rendered,
    &.is-bright .select2-selection__arrow b {
      color: var(--#{$cdk}primary-800);
      border-top-color: var(--#{$cdk}primary-800);
    }
  }

  #orderProductsPanel {
    .btn-product-pack-modal {
      display: block;
      margin-top: 5px;
    }

    .cellProductTaxes {
      .input-group {
        > input {
          min-width: 60px;
        }
      }
    }

    .info-block {
      .col-sm:not(:last-child) {
        .text-muted {
          /* stylelint-disable-next-line */
          margin-bottom: 4px !important;
        }
      }
    }

    @media (max-width: 1554px) {
      .discount-action,
      .order-product-pagination {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  }

  .configure {
    &-link {
      display: block;
      margin-top: 5px;
    }
  }

  #product-pack-modal-table {
    .cell-product-quantity {
      .badge {
        min-width: 26px;
        font-size: 100%;
        @include border-radius(1000px!important);
      }
    }
  }

  .customer {
    .badge-dark {
      font-size: 100%;
    }

    .customer-groups .badge {
      padding: 0.45rem 0.6rem;
      margin: 0.1rem 0;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--#{$cdk}primary-600);
      white-space: normal;
      background: #fff;
      @include border-radius(1000px);
    }
  }

  // Todo: Change it in the UIKit for 1.7.8 but this change is for 1.7.7
  #orderProductsOriginalPosition {
    .cellProductQuantity {
      .rounded-circle {
        min-width: 21px;
        @include border-radius(100px!important);
      }
    }
  }

  @media not print {
    .card-details {
      border: none;
      box-shadow: none;

      .card-body {
        padding: 0;
      }
    }
  }

  > .row:not(.d-print-none) {
    @media print {
      display: block !important; // stylelint-disable-line
    }
  }

  @media print {
    button,
    select {
      display: none;
    }

    a {
      color: $black;
      text-decoration: none;
    }

    .left-column,
    .right-column {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;

      .card,
      .tab-pane {
        page-break-inside: avoid;
      }
    }

    .tab-content {
      padding: 0;
      background-color: inherit;

      .tab-pane {
        opacity: 1;
      }
    }

    .print-title {
      .print-title-id {
        color: #8a8a8a;
      }
    }

    .badge-dark,
    .badge-secondary {
      color: $black;
      background-color: $white;
    }

    .badge-print-light {
      font-weight: 500;
      color: $black !important; // stylelint-disable-line
      background-color: $white !important; // stylelint-disable-line
    }
  }
}

.adminorders {
  .header-toolbar {
    h1,
    p {
      margin-bottom: 0;
    }
  }

  .alert .alert-text {
    ol {
      margin-top: 5px;
      margin-bottom: 0;
    }
  }
  @media print {
    display: block;

    .header-toolbar {
      position: initial;
    }

    #main-div .content-div {
      // Forced to use an important there to override inline-style added with JS
      /* stylelint-disable declaration-no-important */
      padding-top: 0 !important;
      /* stylelint-enable */
    }

    .toolbar-icons {
      display: none;
    }

    .content-div > .row {
      display: block;
    }
  }
}

@include media-breakpoint-down(lg) {
  .partial-refund {
    .cancel-product-cell {
      .cancel-product-cell-elements {
        flex-direction: column;
        align-items: flex-end;

        .cancel-product-quantity {
          margin-bottom: 10px;
        }
      }
    }
  }

  #order-view-page {
    #view_order_payments_block {
      .table {
        overflow: auto;

        &:not(.discountList) {
          display: block;

          &.table-empty {
            display: table;
          }
        }

        &-head {
          &-invoice {
            min-width: auto;
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(lg) {
  #order-view-page {
    .right-column .tab-content,
    #orderProductsPanel {
      table {
        display: block;
        overflow: auto;

        &.table-empty {
          display: table;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .adminorders {
    .header-toolbar {
      h1 {
        font-size: 1.2rem;
      }

      .lead {
        font-size: 1rem;
      }

      .toolbar-icons {
        margin-top: 5px;
      }
    }
  }

  #order-view-page {
    .right-column .tab-content,
    #orderProductsPanel {
      table {
        display: block;
        overflow: auto;

        &.table-empty {
          display: table;
        }
      }
    }

    .order-product-pagination {
      label {
        margin-right: 1rem;
        /* stylelint-disable-next-line */
        margin-left: 0 !important;
      }
    }

    .card-details {
      &-form {
        width: 100%;
      }

      &-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .select2-container,
        .btn-primary {
          // stylelint-disable-next-line declaration-no-important
          width: 100% !important;
          // stylelint-disable-next-line declaration-no-important
          min-width: inherit !important;
          max-width: 100%;
        }
      }
    }

    .product-row {
      > div {
        &:first-child {
          order: 1;
        }

        &:last-child {
          order: 2;
        }
      }

      .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        overflow: auto;

        .nav-item {
          min-width: 165px;
        }
      }
    }

    .cancel-product-element {
      margin-top: 10px;

      p {
        margin-bottom: 0;
      }
    }

    .order-actions {
      justify-content: center;

      #update_order_status_action_form {
        .input-group {
          gap: var(--#{$cdk}size-8);
        }
      }

      .select-status {
        max-width: var(--#{$cdk}size-208);

        .select-status-colored,
        .select2-selection {
          max-width: inherit;
          padding-right: 2.5rem;
          text-overflow: ellipsis;
        }
      }

      a,
      button {
        text-align: left;

        i {
          margin-right: 20px;
        }
      }

      &-print {
        width: 100%;
        max-width: 242px;

        > .input-group,
        button {
          width: 100%;
          text-align: center;

          i {
            margin-right: 0.5rem;
          }
        }
      }
    }

    #orderProductsPanel {
      .cellProductName {
        min-width: 130px;
      }

      .info-block {
        .row > * {
          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
      }

      .discount-action {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;

        button {
          width: 100%;

          &:not(:last-child) {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

.cancel-product-cell {
  max-width: 400px;
  padding-right: 0;
  margin-right: 0;

  .cancel-product-cell-elements {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .cancel-product-selector {
      align-self: center;
      width: 30px;
    }

    .form-group {
      display: flex;
      flex-direction: row;
      padding: 0 5px;
      margin-bottom: 0;

      .form-control-label {
        flex-shrink: 0;
        align-self: center;
        padding: 0;
        margin-bottom: 0;
        font-weight: 700;
      }

      .input-group {
        min-width: 100px;
        max-width: 110px;

        .form-control {
          min-width: 44px;
          max-width: 76px;
          height: 35px;
        }

        .input-group-append {
          height: 35px;
        }

        .max-refund {
          flex-basis: 100%;
          padding-left: 10px;
        }
      }

      &.cancel-product-amount {
        .input-group {
          min-width: 125px;
          margin-top: 12px;
        }
      }
    }
  }
}

.voucher-refund-type-negative-error {
  display: none;
  color: $danger;
}

input.refund-quantity {
  max-width: 160px;
  margin-left: 10px;
}

input.refund-amount,
input#partial_refund_shipping {
  max-width: 80px;
  margin-left: 10px;
}

.cellProductActions .btn,
.discountList .btn {
  color: $medium-gray;
  background-color: transparent;
}

.cellProductActions .btn:hover,
.discountList .btn:hover {
  color: $primary;
}

.discountList {
  &-name {
    max-width: 400px;
  }
}

@media (max-width: 390px) {
  #order-view-page {
    .right-column .tab-content,
    #orderProductsPanel {
      table {
        &.table-empty {
          display: block;
        }
      }
    }

    .order-actions {
      &-print {
        max-width: 186px;

        button {
          text-align: left;

          i.material-icons {
            margin-right: 20px;
          }
        }
      }

      &-invoice,
      &-delivery {
        width: 100%;
        max-width: 286px;

        a {
          width: 100%;
          max-width: 286px;
          margin: auto;
        }
      }

      &-invoice {
        + .order-actions-print {
          max-width: 286px;
        }
      }

      .partial-refund-display {
        width: 185px;
      }

      .select-status {
        max-width: 148px;
      }

      > * {
        &:not(:last-child) {
          margin-right: 0;
        }
      }
    }
  }
}
